import { computed, defineComponent, reactive } from "vue";
import "./Canve.less";
import { uuid } from "vue-uuid";
import CanveItem from "./CanveItem";
import { useLayoutStore } from "../store/index";

export default defineComponent({
  setup() {
    let layoutStore = useLayoutStore();
    let cStyle = computed(() => {
      return {
        width: layoutStore.getStyle.width + "px",
        height: layoutStore.getStyle.height + "px",
      };
    });
    let leftLine = reactive({ left: "-1px", display: "none" });
    let topLine = reactive({ top: "-1px", display: "none" });

    let showHelpLines = (lines: { left: number; top: number }) => {
      let { left, top } = lines;
      leftLine.left = left + "px";
      leftLine.display = left >= 0 ? "block" : "none";
      topLine.top = top + "px";
      topLine.display = top >= 0 ? "block" : "none";
    };

    let canvasDragEnter = (e: any) => {};

    let canvasDragOver = (e: any) => {
      e.preventDefault();
    };

    let canvasDrop = (e: DragEvent) => {
      let componentId = e.dataTransfer?.getData("component");
      if (componentId) {
        layoutStore.addComponent({
          label: "请输入",
          uuid: uuid.v4(),
          selected: false,
          position: {
            left: e.offsetX,
            top: e.offsetY,
          },
          component: componentId,
        });
      }
    };

    return () => (
      <div
        class="canve"
        date-comNumber={layoutStore.getComponents.length}
        style={cStyle.value}
        onDragenter={canvasDragEnter}
        onDragover={canvasDragOver}
        onDrop={canvasDrop}
      >
        <div
          class="canve-hline"
          style={{ top: topLine.top, display: topLine.display }}
        ></div>
        <div
          class="canve-vline"
          style={{ left: leftLine.left, display: leftLine.display }}
        ></div>
        {layoutStore.getComponents &&
          layoutStore.getComponents.length &&
          layoutStore.getComponents.map((item: any) => {
            return (
              <CanveItem
                key={item.uuid.toString()}
                item={item}
                onShowHelpLine={showHelpLines}
              ></CanveItem>
            );
          })}
      </div>
    );
  },
});
